<template>
  <div class="cardTop">
    <el-row class="operation">
      <el-col :span='4'>
        <el-button :disabled="!$store.state.retailers.form.code" @click="recheckReset">复核重置</el-button>
      </el-col>
      <el-col :span='5'>
        订单占用：<el-switch class="mb6" v-model="switchVal" />
      </el-col>
      <el-col :span='6'>
        订单号：<span>{{$store.state.retailers.form.code||''}}</span>
      </el-col>
      <el-col :span='6'>
        店铺：<span>{{$store.state.retailers.form.shopNick||''}}</span>
      </el-col>
      <el-col :span='3'>
        包裹数：<span>{{$store.state.retailers.form.code?'1':' '}}</span>
      </el-col>
    </el-row>
    <el-table
      border
      height='300'
      :row-class-name="tableRowClassName"
      :data="$store.state.retailers.topData"
    >
      <el-table-column type="index" width="50" label="序号" align='center'></el-table-column>
      <el-table-column prop="status" label="状态" :formatter="formatterStatus" align='center'></el-table-column>
      <el-table-column prop="goodsName" label="商品名称" align='center'></el-table-column>
      <el-table-column prop="goodCode" label="商品编码" align='center' width='200'></el-table-column>
      <el-table-column prop="goodsBarCode" label="商品条码" align='center' width='200'></el-table-column>
      <el-table-column prop="goodsUnitName" label="单位" align='center'></el-table-column>
      <el-table-column label="计划数量" align='center'>
        <template v-slot="{ row }">
           <span style="color:red;font-weight:700;font-size:18px">{{row.pickingQuantity}}</span>
        </template>
      </el-table-column>
      <el-table-column label="复核数量" align='center'>
        <template v-slot="{ row }">
           <span style="color:green;font-weight:700;font-size:18px">{{row.recheckQuantity}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="goodsStatusName" label="库存状态" align='center'></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { recheckReset } from '@/api/basicInfo'
export default {
  name: 'cardTop',
 data() {
    return {
      state: this.$store.state.retailers,
      allAlign:'center',
    };
  },
  computed: {
    switchVal: {
      get() {
        return this.$store.getters.orderOccupy
      },
      set(newValue) {
        return this.$store.commit('retailers/SET_ORDER_OCCUPY', newValue)
      }
    }
  },
  methods: {
    // 复核重置
    recheckReset() {
      recheckReset(this.$store.state.retailers.form.code).then((res)=>{
        this.$message.success(res.msg);
        this.$eventBus.$emit('recheckReset')
      })
    },
    //状态
    formatterStatus( row, column, cellValue, index ){
      if(cellValue  === 0)return '新增'
      if(cellValue  === 1)return '待分配'
      if(cellValue  === 2)return '部分分配'
      if(cellValue  === 3)return '已分配'
      if(cellValue  === 4)return '已作废'
      if(cellValue  === 5)return '生成波次中'
      if(cellValue  === 6)return '待拣货'
      if(cellValue  === 7)return '待复核'
      if(cellValue  === 8)return '复核中'
      if(cellValue  === 9)return '待发货'
      if(cellValue  === 10)return '发货中'
      if(cellValue  === 11)return '出库完成'
    },
    tableRowClassName({row, rowIndex}) {
      if (row.status === 9) {
        return 'row-bg';
      }
      return '';
    }
  }
}
</script>

<style>
  .el-table .row-bg {
    background: oldlace;
  }
</style>
<style scope>
  .mb6 {
    margin-bottom: 6px;
  }
  .operation {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
</style>

